<template>
  <div id="app">
    <el-dialog
      v-model="visible"
      style="padding: 0; height: 90vh; max-height: 890px; border-radius: 20px"
      :show-close="false"
      close-on-press-escape
      :align-center="true"
      width="898"
      destroy-on-close
    >
      <template #header>
        <div style="background-color: #f4f5f7" class="dialog-header">
          <span>{{ props.title }}</span>
          <span @click="visible = false">
            <el-icon><CloseBold /></el-icon>
          </span>
        </div>
      </template>
      <el-scrollbar style="height: calc(90vh - 130px)">
        <!-- 这里放表单 -->
        <slot name="form"></slot>
      </el-scrollbar>
      <template #footer>
        <div style="padding: 0 10px">
          <el-button @click="onSubmit">保存</el-button>
          <el-button @click="visible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { CloseBold } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  onSubmit: {
    type: Function,
    required: false,
  },
  onCancel: {
    type: Function,
    required: true,
  },
})

const visible = ref(props.modelValue)
watch(
  () => props.modelValue,
  (newValue) => {
    visible.value = newValue
  },
)
watch(visible, (newValue) => {
  if (!newValue) {
    props.onCancel()
  }
})
</script>
<style scoped>
.empty-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.herder-title {
  font-size: 24px;
  align-items: center;
  display: flex;
  text-align: left;
}

.title {
  margin: 0 4px;
}

.btnRotate {
  transform: rotate(90deg);
  width: 32px;
  height: 30px;
}

.label-tabs {
  margin-left: 24px;
}

.left-btn {
  /* 子元素靠右 */
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.dialog-header {
  border-radius: 20px 20px 0 0;
  height: 53px;
  line-height: 53px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.dialog-header span:last-child .el-icon {
  color: #333;
  transition: color 0.3s;
}

.dialog-header span:last-child .el-icon:hover {
  color: #0052cc;
}
</style>
